<template>
  <div
    class="light-dialog"
    v-if="visible"
    :style="`width: ${styleWidth};top: ${top};left: ${styleLeft};right: ${right}`"
  >
    <div class="light_dialog_header">
      <div class="head light_dialog_header_head" v-if="title">
        <div class="title">{{ title }}</div>
        <div class="right">
          <i class="el-icon-close" @click="close" v-if="!isClose"></i>
          <slot name="right" v-else></slot>
        </div>
      </div>
      <slot name="title"></slot>
      <div class="content">
        <slot></slot>
      </div>
      <div class="linght-dialog__footer" v-if="!hiddenButton">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LightDialog",
  props: {
    isClose: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    width: {
      default: "200px",
    },
    top: {
      default: "100px",
    },
    left: {
      default: "200px",
    },
    right: {
      default: 0,
    },
    hiddenButton: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    styleWidth() {
      if (typeof this.width === "string") {
        return this.width;
      } else {
        return this.width + "px";
      }
    },
    styleLeft() {
      if (this.right !== 0) {
        return "auto";
      } else {
        return this.left;
      }
    },
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$emit("close");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.light-dialog {
  position: fixed;
  border-radius: 3px;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  .light_dialog_header {
    background-color: #fff;
    min-height: 150px;
    height: 100%;
    .head {
      margin: -1px;
      background-color: $base-theme-sub-color;
      padding: 10px 20px;
      display: flex;
      .title {
        line-height: 24px;
        font-size: 16px;
        color: #fff;
        flex: 1;
      }
      i {
        color: #fff;
        cursor: pointer;
        line-height: 23px;
      }
    }
    .content {
      padding: 10px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
      height: calc(100% - 44px);
      position: relative;
    }
    .linght-dialog__footer {
      padding: 10px 20px 20px;
      text-align: right;
      box-sizing: border-box;
    }
  }
}
</style>
